<template>
  <div class="kanban">
    <template v-for="config in kanbanComponentList" :key="config.id">
      <div class="item">
        <component
          :is="componentMap[config.component]"
          v-prop-bind="config"
        ></component>
      </div>
    </template>
  </div>
</template>

<script setup>
import components from "./config";
import Input from "./Input.vue";
import Image from "./Image.vue";
import { ref } from "vue";

const componentMap = {
  Input,
  Image,
};

const kanbanComponentList = ref([]);
kanbanComponentList.value = components;

// 检查是否进行数据流动
setTimeout(() => {
  kanbanComponentList.value[0].position.width = "500px";
}, 3000);
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.kanban {
  position: relative;
  background: gray;
  height: 100vh;
  padding-top: 5%;
}

.item {
  margin-bottom: 20px;
}
</style>
